<template>
  <div class="flex items-center text-base text-gray-600 hover:text-green-600 pr-2" @click.prevent="$emit('click', $event)">
  <div class="pr-1">
      <div class="p-2 rounded-full hover:bg-gray-700">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      class="fill-current w-5"
      :class="{
        'text-green-600': retweeted,
      }"
    >
      <path
        d="M5.41 16H18a2 2 0 0 0 2-2 1 1 0 0 1 2 0 4 4 0 0 1-4 4H5.41l2.3 2.3a1 1 0 0 1-1.42 1.4l-4-4a1 1 0 0 1 0-1.4l4-4a1 1 0 1 1 1.42 1.4L5.4 16zM6 8a2 2 0 0 0-2 2 1 1 0 0 1-2 0 4 4 0 0 1 4-4h12.59l-2.3-2.3a1 1 0 1 1 1.42-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.42-1.4L18.6 8H6z"
      />
    </svg>
    </div>
    </div>
    <span
      :class="{
        'text-green-600': retweeted,
      }"
      >{{ tweet.retweets_count }}</span
    >
    </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    tweet: {
      required: true,
      type: Object,
    },
  },

  computed: {
    ...mapGetters({
      retweets: "retweets/retweets",
    }),

    retweeted() {
      return this.retweets.includes(this.tweet.id);
    },
  },
};
</script>
